<template>
	<view class="wrap">
		<text class="className" v-text="courseName"></text>
		<view class="studentInfo borderBottom" v-for="(item, i) in studentList" :key="i">
			<text v-text="item.studentName"></text>
			<view v-if="item.rollCallStatus == 1"><text>已到</text></view>
			<view class="studentStatus" v-else-if="item.rollCallStatus !== 4 && item.rollCallStatus !== 1">
				<button
					class="statusButton grayButton"
					:class="item.rollCallStatus == 1 ? 'blueButton' : item.rollCallStatus == 2 ? 'yellowButton' : ''"
					@click="call(finishClass, i)"
					v-text="finishClass ? '迟到' : '已到'"
				></button>
				<button class="statusButton grayButton" :class="item.rollCallStatus == 3 ? 'redButton' : ''" @click="call(3, i)">未到</button>
			</view>
			<view v-else>
				<icon class="iconfont iconziyuan2"></icon>
				请假
			</view>
		</view>
		<button :class="buttonDisabled ? 'submitButton' : 'submitButtonActive'" :disabled="buttonDisabled" @click="rollCallEnd">点名结束</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			studentList: [],
			courseName: '',
			buttonDisabled: true,
			finishClass: false
		};
	},
	async onLoad(options) {
		this.id = options.data;
		this.courseName = options.courseName;
		this.finishClass = options.lessonStatus == 1 ? false : true;

		let resp = await this.getDetail(this.id);
		this.studentList = JSON.parse(resp.result.detailVoStr);
	},
	methods: {
		async getDetail(id) {
			let resp = await this.$http.get({
				url: `/edu/rollCall/detail/${id}`
			});
			return resp;
		},
		call(status, i) {
			if (status && status !== 3) {
				this.studentList[i].rollCallStatus = 2; //迟到状态
			} else if (!status && status !== 3) {
				this.studentList[i].rollCallStatus = 1; //已到状态
			} else {
				this.studentList[i].rollCallStatus = status; //未到状态
			}
		},
		async rollCallEnd() {
			let url = '';
			if (this.finishClass) {
				url = '/edu/rollCall/classOverRollCall';
			} else {
				url = '/edu/rollCall/classBeginRollCall';
			}
			await this.$http.post({
				url: url,
				data: {
					id: this.id,
					detailVoStr: JSON.stringify(this.studentList)
				}
			})
			this.showToast('点名成功',()=> {uni.navigateBack()});
		}
	},
	computed: {
		buttonStatusCal: function() {
			let status = '';
			// let that = this
			status = this.studentList.some(element => {
				return element.rollCallStatus == 0;
			});
			this.buttonDisabled = status;
			return this.buttonDisabled;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 50upx;
}
.className {
	font-size: 36upx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.studentInfo {
	display: flex;
	justify-content: space-between;
	align-items: center;

	text {
		&:nth-of-type(1) {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 100upx;
		}
	}

	.studentStatus {
		display: flex;
		align-items: center;

		.statusButton {
			width: 110upx;
			height: 60upx;
			border-radius: 4px;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			display: inline-block;
			line-height: 60upx;
			text-align: center;
			margin-left: 20upx;
		}

		.blueButton {
			background: rgba(60, 104, 229, 1) !important;
			color: rgba(255, 255, 255, 1) !important;
		}

		.redButton {
			background: #ff534a !important;
			color: rgba(255, 255, 255, 1) !important;
		}

		.grayButton {
			background: rgba(218, 221, 229, 1);
			color: rgba(153, 153, 153, 1);
		}
		.yellowButton {
			background: rgba(255, 217, 0, 1) !important;
			color: rgba(255, 255, 255, 1) !important;
		}
	}
}
</style>
